<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="app-container">
        <ud-card>
            <div class="tools">
                <div class="left">
                    <el-input placeholder="输入券码进行搜索" style="width:220px;" v-model="kw" size="small"></el-input>
                </div>

            </div>
            <el-divider></el-divider>
            <el-table size="mini" :data="items" v-loading="loading">
                <el-table-column label="#ID" prop="id" width="40"></el-table-column>
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="用户" prop="user_mobile"></el-table-column>
                <el-table-column label="券码" prop="code"></el-table-column>
                <el-table-column label="来源" prop="source"></el-table-column>
                <el-table-column label="核销状态" width="100">
                    <template slot-scope="scope">
                        <el-tag v-if="scope.row.used == true" size="mini" type="success" plain>已使用</el-tag>
                        <el-tag v-else size="mini" type="info" plain>未使用</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="领取时间" width="140">
                    <template slot-scope="scope">
                        {{ scope.row.created_at | utcFormater }}
                    </template>
                </el-table-column>
                <el-table-column label="过期时间" width="140">
                    <template slot-scope="scope">
                        {{ scope.row.expired_at | utcFormater }}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="60">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.used != true && btns.update_coupon_used" size="mini"
                            @click="useHandle(scope.row.id)" type="text">核销</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pager">
                <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="total" :page-size="pageSize" hide-on-single-page background
                    @current-change="(page) => (this.page = page)" @size-change="(size) => (this.pageSize = size)" />
            </div>
        </ud-card>
    </div>
</template>

<script>
import { getCouponList, updateCouponUsed } from "@/api/coupon";
export default {
    name: "UserCoupons",
    data () {
        return {
            items: [],
            page: 1,
            kw: '',
            pageSize: 20,
            total: 0,
            loading: false,
        };
    },
    props: {
        btns: { type: Object, default: {} },
    },

    watch: {
        "kw": function () {
            setTimeout(() => {
                this.page = 1
                this.loadData();
            }, 500)
        },

        "page": function () {
            this.items = []
            this.loadData()
        },

        "pageSize": function () {
            this.items = []
            this.loadData()
        },

    },

    mounted: function () {
        this.loadData();
    },

    computed: {},

    methods: {
        useHandle: function (couponId) {
            this.$confirm("确认要将该券核销吗？", "操作确认").then(() => {
                this.loading = true;
                updateCouponUsed(couponId).then((res) => {
                    this.loading = false;
                    if (res.status != 0) {
                        return;
                    }
                    this.loadData();
                    this.$message.success("已使用");
                    this.$emit("change", "");
                });
            });
        },

        loadData: function () {
            if (this.loading) {
                return
            }

            this.loading = true;
            var query = {
                kw: this.kw || "",
                page: this.page,
                per_page: this.pageSize,
            };
            getCouponList(query).then((res) => {
                this.loading = false;
                this.total = res.data.page.total_items
                if (res.status != 0) {
                    return;
                }
                this.items = res.data.result.map((c) => {
                    c.hexiao = c.used === true ? "已使用" : "未使用";
                    c.cat = c.cat == 'card' ? '卡' : '券'
                    return c;
                });
            });
        },
    },
};
</script>

<style scoped></style>
